<template>
	<view class="register-container">
		<!--绑定状态-->
		<view v-if="opeStatus === 'binding' " class="register-content">
			<view class="register-form">
				<view class="register-form-item">
					<view class="label">
						已绑定邮箱
					</view>
					<view class="value">
						{{ userStore.userInfo.email }}
					</view>
				</view>
			</view>
			<view class="group-button">
				<button type="warn" @click="handleUnBind">解绑</button>
				<!-- <button type="primary" @click="handleEdit">修改密码</button> -->
			</view>
		</view>
		<!--未绑定状态-->
		<view v-else-if="opeStatus == 'unbinding'" class="register-content">
			<view class="register-header">
				<view class="title">
					未发现绑定邮箱，请完成绑定
				</view>
				<view class="tip">
					绑定邮箱后，其他用户可以通过邮箱添加您为项目成员
				</view>
			</view>
			<button class="submit-btn" @click="goBindEmail">去绑定</button>
		</view>
  
		<view v-else-if = "opeStatus.length > 0">
			<view class="register-header">
				<view class="tip">
					{{ opeStatus === 'edit' ? '修改密码' : '绑定邮箱' }}
				</view>
			</view>
			<view class="register-form">
			<input 
				type="email" 
				v-model="email" 
				placeholder="请输入邮箱"
				:disabled="opeStatus === 'edit'"
			/>
			<view class="input-group">
				<input 
					type="text" 
					v-model="emailCode" 
					placeholder="请输入邮箱验证码"
				/>
				<button 
					class="send-code-btn" 
					:disabled="countdown > 0"
					@click="sendEmailCode"
				>
					{{ countdown > 0 ? `${countdown}s` : '发送邮箱验证码' }}
				</button>
			</view>	
				<input
					type="password"
					v-model="password"
					placeholder="请输入密码"
				/>
				<input
					type="password"
					v-model="confirmPassword"
					placeholder="请输入确认密码"
				/>
				<button class="submit-btn" @click="handleBindEmail">{{ opeStatus === 'edit' ? '提交' : '绑定'}}</button>
				<button @click="goBack">返回</button>
			</view>
		</view>
	</view>
  </template>
  
  <script setup>
  import { ref,onMounted } from 'vue'
  import { useUserStore } from '@/stores/user'
  
  const userStore = useUserStore()
  
  // 表单数据
  const email = ref('')
  const emailCode = ref('')
  const password = ref('')
  const confirmPassword = ref('')
  const countdown = ref(0)
  let timer = null;

  //操作状态
  const opeStatus = ref(''); 
  
  onMounted(async() => {
	opeStatusInit();
  })

  //操作状态初始化
  const opeStatusInit=()=>{
	opeStatus.value  = userStore.userInfo.email && userStore.userInfo.email.length > 0 ? 'binding' : 'unbinding';
  }
  
  //开始倒计时
  const startCountdown = () => {
	  countdown.value = 60
	  timer = setInterval(() => {
		countdown.value--
		if (countdown.value <= 0) {
		  clearInterval(timer)
		  countdown.value = 0
		  timer = null;
		}
	  }, 1000)
  }
  
  
  //发送邮箱验证码
  const sendEmailCode = async () => {
	  if (!email.value) {
		  uni.showToast({
			title: '请输入邮箱',
			icon: 'none'
		 })
		  return
	  }		
  
	  try {
		  // TODO: 调用发送邮箱验证码接口
		  // type: 类型 0-注册 1-修改密码 2-绑定邮箱
		  await userStore.sendEmailCode({email:email.value,type:2})
		  startCountdown();
		  uni.showToast({
			  title: '邮箱验证码发送成功',
			  icon: 'success'
		  })
	  } catch (error) {
		  console.log('userStore.sendEmailCode error',error);
		  uni.showToast({
			  title: '邮箱验证码发送失败:' + error.message,
			  icon: 'none'
		  })
	  }
  }
  
  //进入绑定邮箱界面 
  const goBindEmail=()=>{
	email.value = ''
	opeStatus.value = 'goBind';
  }
  
  
  
  //绑定邮箱
  const handleBindEmail = async () => {
	if (!email.value || !emailCode.value || !password.value || !confirmPassword.value) {
	  uni.showToast({
		title: '请填写完整信息',	
		icon: 'none'
	  })
	  return
	}	
  
	if(password.value !== confirmPassword.value){
	  uni.showToast({
		title: '密码不一致',
		icon: 'none'
	  })
	  return
	}

	if ( opeStatus.value === 'edit' ){
		try {
			// TODO: 调用邮箱绑定接口
			await userStore.changePwdByEmail({
				email: email.value,
				emailCode: emailCode.value,
				password: password.value,
				confirmPassword: confirmPassword.value
			})
			uni.showToast({
				title: '修改成功',
				icon: 'success'
			})
		} catch (error) {
			uni.showToast({
				title: '修改失败:' + error.message,
				icon: 'none'
			})
		}
	} else {
		try {
			// TODO: 调用邮箱绑定接口
			await userStore.bindEmail({
				email: email.value,
				emailCode: emailCode.value,
				password: password.value,
				confirmPassword: confirmPassword.value
			})
			uni.showToast({
				title: '绑定成功',
				icon: 'success'
			})
			opeStatusInit();
		} catch (error) {
			uni.showToast({
				title: '绑定失败:' + error.message,
				icon: 'none'
			})
		}
	}
  }
  
  //解绑
  const handleUnBind = ()=>{
	uni.showModal({
		title: '提示',
		content: '邮箱解绑后，无法再用邮箱登录此账号，确定要解绑？',
		success: async(res) => {
			if (res.confirm) {
				try{
					await userStore.unBindEmail()
					uni.showToast({
						title: '解绑成功',
						icon: 'success'
					})
					opeStatusInit();
				}catch(error){
					uni.showToast({
						title: '解绑失败:' + error.message,
						icon: 'none'
					})
				}
			} else if (res.cancel) {
				
			}
		}
	});
  }

  //编辑
  const handleEdit = ()=>{
	opeStatus.value = 'edit';
	//填充默认信息
	email.value = userStore.userInfo.email;
  }

  const goBack = ()=>{
	opeStatusInit();
  }
  
  
  
  // 跳转到登录页
  const goToLogin = () => {
	  uni.reLaunch({
		  url: '/pages/login/index'
	  })
  }
  </script>
  
  <style lang="scss">
  .register-container {
	padding: 40rpx;
	min-height: 100vh;
	background-color: #f8f8f8;
  }
  
  .register-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 60rpx;
	
	.logo {
	  width: 120rpx;
	  height: 120rpx;
	  margin-bottom: 20rpx;
	}
	
	.title {
	  font-size: 36rpx;
	  font-weight: bold;
	  color: #333;
	}

	.tip {
		  text-align: center;
		  color: #007AFF;
		  font-size: 28rpx;
	  }
  }
  
  .register-content {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 40rpx;
  }
  
  .register-form {
	  input {
		  height: 80rpx;
		  padding: 0 20rpx;
		  margin-bottom: 30rpx;
		  border: 2rpx solid #eee;
		  border-radius: 8rpx;
		  font-size: 28rpx;
	  }
		.input-group {
		  display: flex;
	  
		  input {
				flex: 1;  
		  }
	  
		  .send-code-btn {
			  height: 80rpx;
			  line-height:80rpx;
			  margin-left: 20rpx;
			  background-color: #007AFF;
			  color: #fff;
			  font-size: 24rpx;
			  border-radius: 8rpx;
			  
			  &:disabled {
				  background-color: #ccc;
			  }
		  }
	}
  }
  
  .input-wrapper {
	  position: relative;
	  display: inline-block; /* 或者使用 flex，根据需要 */
	  width: 100%; /* 根据需要调整宽度 */
	  .custom-input {
	  }
	   
	  .input-icon {
		position: absolute;
		right: 10px; /* 图标距离输入框右侧的距离 */
		top: 40%;
		transform: translateY(-60%); /* 垂直居中 */
		width: 200rpx; /* 根据需要调整图标大小 */
		height: 50rpx;
	  z-index: 99;
	  }
	}

	.register-form-item{
		.label{
			font-size: 28rpx;

		}
		.value{
			color:#007AFF;
			font-size:34rpx;
		}
	}

	.submit-btn {
		  width: 100%;
		  background-color: #007AFF;
		  color: #fff;
		  border-radius: 8rpx;
		  margin-bottom: 30rpx;
	  }

	.group-button{
		margin: 20rpx 0;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
  </style> 